<template>
	<view class="b-box">
		<!-- <view class="box-tips ss-flex-row ss-row-right ss-col-center                       ">
			<view class="box-tips-txt">签到提醒</view>
			<switch checked color="#3F86FF" style="transform:scale(0.5)" />
		</view> -->
		<view class="date ss-flex-row ss-row-between ss-col-center">
			<template v-for="(item,index) in weeks" :key="index">
				<view class="date-item">{{item}}</view>
			</template>

		</view>

		<view class="sign-box" >
			
			<view class="sign-box-item" v-for="n in num" :key="n">
				<view class="label text-c-c"></view>
				<view class="num text-c-c"></view>
			</view>
			
			<view class="sign-box-item" v-for="(item,index) in signList" :key="index">
				<template v-if="item.is_sigin==0">
					<view class="label text-c-c">{{item.d}}</view>
					<view class="num text-c-c">+{{point}}</view>
				</template> 
				<template v-if="item.is_sigin==1">
					<image :src="sheep.$url.cdn('/static/user/sign-ed.png')" class="sign-ed"></image>
				</template>
			</view>
		</view>
		
		<view class="sign-btn ss-flex-row ss-row-center ss-col-center" v-if="isSigned==false">
			<view class="gotobtn text-c-c" @click="sign">签到</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		reactive,
		computed,
		nextTick,
		onMounted
	} from 'vue';
	
	import dayjs from 'dayjs';
	
	import _ from 'lodash';
	
	const emits = defineEmits(['sign']);
	
	const props = defineProps({
		data:{
			type:Array,
			default:[],
		},
		point:{
			type:Number,
			default:0
		},
		type:{
			type:String,
			default:'user'
		},
	})
	
	
	
	const weeks = ['日', '一', '二', '三', '四', '五', '六'];
	
	const num = ref(0)
	
	
	let dayNum = dayjs().daysInMonth();
	
	let dayArr = _.times(dayNum, i => ({ d:i+1,is_sigin:0}));
	
	//签到列表
	const signList = computed(()=>{
		
		let list =  dayArr.map((day)=>{
			return {
				...day,
				is_sigin:props.data.find(d=>d.d == day.d)?.is_sigin ||0
			}
		})
		
		return list;
	});
	//是否签到
	const isSigned = computed(()=>{
		
		const hao = dayjs().date();
		
		const index = props.data.findIndex((item)=>item.d==hao);
		
		if(index!=-1){
			return props.data[index].is_sigin==1?true:false;
		}else{
			return false;
		}
	})
	
	//获取每月一号是星期几
	function getEveryMonthFirst() {
		
		const firstDayOfMonth = dayjs().startOf('month') 
		
		const weekday = firstDayOfMonth.day() 
		
		const date = weeks[weekday];
		
		let index = weeks.findIndex((item)=>item==date);
		
		num.value = index;
	}
	//签到事件
	function sign(){
		emits('sign')
	}
	
	onMounted(()=>{
		getEveryMonthFirst();
	})
</script>

<style lang="scss" scoped>
	.b-box {
		width: calc(100% - 30rpx - 30rpx - 44rpx - 36rpx);
		padding: 40rpx 36rpx 27rpx 44rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;

		.box-tips {
			width: 100%;
			height: 41rpx;

			.box-tips-txt {
				margin-right: -20rpx;
				width: 112rpx;
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 41rpx;
				text-align: center;
				letter-spacing: normal;
				color: #565656;
			}
		}
		
		

		.date {
			margin-top: 50rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #D8D8D8;
			.date-item {
				width: 43rpx;
				height: 41rpx;
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: normal;
				color: #B6B6B6;

				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.sign-box {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 25rpx;
			padding-bottom:10rpx;
			// border-bottom: 1rpx solid #D8D8D8;

			.sign-box-item {
				height: 79rpx;
				width: 41rpx;

				margin-top: 22rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.sign-ed{
					width: 46rpx;
					height: 46rpx;
				}

				.label {
					width: 37rpx;
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: normal;
					line-height: 41rpx;
					text-align: center;
					letter-spacing: normal;
					color: #1D1D1D;
				}

				.num {
					width: 37rpx;
					height: 35rpx;
					font-family: Source Han Sans;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 27rpx;
					text-align: center;
					letter-spacing: normal;
					color: #3F86FF;
				}
			}

			.sign-box-item:nth-child(7n+1) {
				margin-right: 53rpx;
			}

			.sign-box-item:nth-child(7n+2) {
				margin-right: 53rpx;
			}

			.sign-box-item:nth-child(7n+3) {
				margin-right: 53rpx;
			}

			.sign-box-item:nth-child(7n+4) {
				margin-right: 53rpx;
			}

			.sign-box-item:nth-child(7n+5) {
				margin-right: 53rpx;
			}

			.sign-box-item:nth-child(7n+6) {
				margin-right: 53rpx;
			}
		}
		
		.sign-btn{
			width:100%;
			height:59rpx;
			margin-top:25rpx;
			.gotobtn{
				width: 160rpx;
				height: 59rpx;
				border-radius: 100rpx;
				background: #2B6EDE;
		
				
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 43rpx;
				letter-spacing: normal;
				color: #FFFFFF;
			}
			
		}
		
	}

	.text-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>